<template>
  <div class="topnav-wrapper">
    <div class="topnav">
      <img src="../assets/icon/hum.png" alt="hamburger" @click="toggleAside" class="toggleAside" v-if="toggleAsideVisible"/>
      <router-link to="/" class="logo">
        <img alt="Logo" src="../assets/logo1.png"/>
        <span>Drop</span>
      </router-link>
      <ul class="menu">
        <li>
          <router-link to="/doc/introduce">起步</router-link>
        </li>
        <li><a href="https://gitee.com/zhangdeshou/drop-ui">源码</a></li>
      </ul>
    </div>
  </div>
</template>
<script lang="ts">
  import {inject, Ref} from 'vue';

  export default {
    props:{
      toggleAsideVisible:{
        type:Boolean,
        default:false
      }
    },
    setup() {
      const asideVisible = inject<Ref<boolean>>('asideVisible'); //get
      const toggleAside = () => {
        asideVisible.value = !asideVisible.value;
      };
      return {toggleAside};
    }
  };
</script>
<style lang="scss" scoped>
  .topnav-wrapper {
    border-bottom-right-radius: 70px;
    border-bottom-left-radius: 70px;
    background: #50a0ff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;

    .topnav {
      padding: 0 56px;
      display: flex;
      height: 70px;
      justify-content: center;
      align-items: center;
      a,a:hover,a:active{
        text-decoration: none;
        border: none;
      }
      @media (max-width: 500px) {
        height: 50px;
      }

      .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 6em;
        margin-right: auto;

        a {
          display: flex;
          align-items: flex-end;
        }

        img {
          width: 14px;
        }

        span {
          margin-left: 6px;
          color: #fff;
          font-size: 20px;
        }
      }

      > .menu {
        color: #fff;
        display: flex;
        white-space: nowrap;
        flex-wrap: nowrap;
        > li {
          margin: 0 1em;
        }
      }

      > .toggleAside {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        display: none;
      }
      @media (max-width: 500px) {
        > .menu {
          display: none;
        }
        > .logo {
          margin: 0 auto;
          > img{display: none}
        }
        > .toggleAside {
          display: inline-block;
        }
      }
    }
  }
</style>
